<template>
  <div class="Person_2">
    <p>name:{{ name }}</p>
    <p>Age: {{ age }}</p>
    <p>Occupation: {{ occupation }}</p>
    <button @click="showname">查看姓名</button>
    <button @click="changename">修改姓名</button>
  </div>
</template>
<script lang="ts" setup name="Person_4">
import { ref } from 'vue'
const name = ref('John Doe')
const age = 30
const occupation = 'Software Developer'
console.log(name)
console.log(age)
//方法
function changename() {
  name.value = 'zhang_san'
}
const showname = () => {
  alert(name.value)
}
</script>
<style>
.Person_2 {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background-color: #2196f3;
  color: white;
}
</style>
